<template>
  <div class="trade-container">
    <Top />
    <div class="trade-main">
      <h3 class="title">填写并核对订单信息</h3>
      <div class="bg"></div>
      <div class="content">
        <!-- 收件人 -->
        <h5 class="receive">收件人信息</h5>
        <div
          @click="addressSelectHandle(address, addressItem)"
          class="address clearFix"
          :key="addressItem.id"
          v-for="addressItem in address"
        >
          <span
            class="username"
            :class="{ selected: addressItem.isDefault == 1 }"
            >{{ addressItem.consignee }}</span
          >
          <span class="s2">{{ addressItem.phoneNum }}</span>
          <p>
            <span class="s1">{{ addressItem.fullAddress }}</span>
            <span class="s3" v-show="addressItem.isDefault == 1">默认地址</span>
          </p>
        </div>

        <div class="bg2"></div>

        <!-- 支付 -->
        <h5 class="pay">支付方式</h5>
        <div class="address clearFix">
          <span class="username selected">在线支付</span>
          <span class="username" style="margin-left: 5px">货到付款</span>
        </div>
        <div class="bg2"></div>

        <!-- 商品清单 -->
        <h5 class="pay">商品清单</h5>
        <div class="detail">
          <div
            class="list clearFix"
            :key="detailItem.skuId"
            v-for="detailItem in detailArrayList"
          >
            <img :src="detailItem.imgUrl" alt="" />
            <div class="desc">
              <p class="desctitle">
                {{ detailItem.skuName }}
              </p>
              <p class="count">
                <span class="price">￥{{ detailItem.orderPrice }}.00</span>
                <span class="number">X{{ detailItem.skuNum }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="bg"></div>

        <!-- 留言 -->
        <van-field
          v-model="msg"
          rows="2"
          autosize
          label="买家留言"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
      </div>
    </div>

    <van-submit-bar
      :decimal-length="0"
      :price="tradeInfo.totalAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { Notify } from 'vant';
import { mapState } from "vuex";
export default {
  name: "Trade",
  data() {
    return {
      msg:''
    };
  },
  methods: {
    // 提交订单
    async onSubmit() {
      let {tradeNo} = this.tradeInfo
      let data = {
        consignee: this.defaultAddress.consignee, //付款人的名字
        consigneeTel: this.defaultAddress.phoneNum, //付款人的手机号
        deliveryAddress: this.defaultAddress.fullAddress, //付款人收货地址
        paymentWay: "ONLINE", //支付方式都是在线支付
        orderComment: this.msg, //买家留言
        orderDetailList: this.detailArrayList, //购物车商品信息
      };

      try {
        await this.$store.dispatch('submitOrder',{tradeNo,data})
        this.$router.push('/pay?orderId='+this.orderId)
      } catch (error) {
        Notify({type:"warning",message:error})
      }
    },
    addressSelectHandle(addressAll, addressItem) {
      addressAll.forEach((item) => (item.isDefault = 0));
      addressItem.isDefault = 1;
    },
  },
  computed: {
    ...mapState({
      tradeInfo: (state) => state.trade.tradeInfo,
      address: (state) => state.trade.address,
      orderId: (state) => state.trade.orderId,
    }),
    detailArrayList() {
      return this.tradeInfo.detailArrayList || [];
    },
    defaultAddress(){
      return this.address.find(item=>item.isDefault==1)
    }
  },
  mounted() {
    this.$store.dispatch("getTrade");
    this.$store.dispatch("getAddress");
  },
};
</script>

<style lang="less" scoped>
.clearFix::after {
  content: "";
  display: block;
  clear: both;
}
.trade-container {
  .trade-main {
    .title {
      width: 100%;
      font-size: 16px;
      line-height: 20px;
      text-align: center;
    }
    .content {
      width: 100%;
      // margin: 10px auto 0;
      padding: 3px 15px 10px;
      box-sizing: border-box;
      .receive {
        line-height: 10px;
        margin: 18px 0;
        font-size: 18px;
      }

      .address {
        padding-left: 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #999;
        .username {
          float: left;
          width: 70px;
          line-height: 24px;
          text-align: center;
          border: 1px solid #ddd;
          position: relative;
          font-size: 15px;
        }

        .username::after {
          content: "";
          display: none;
          width: 13px;
          height: 13px;
          position: absolute;
          right: 0;
          bottom: 0;
          background: url(./images/choosed.png) no-repeat;
        }

        .username.selected {
          border-color: #e1251b;
        }

        .username.selected::after {
          display: block;
        }
        .s2 {
          font-size: 18px;
          margin-left: 20px;
        }

        p {
          width: 310px;
          float: left;
          line-height: 28px;
          padding-left: 5px;
          cursor: pointer;
          font-size: 13px;

          .s1 {
            float: left;
          }

          .s3 {
            float: right;
            width: 40x;
            height: 24px;
            line-height: 24px;
            margin-left: 10px;
            background-color: #878787;
            color: #fff;
            margin-top: 3px;
            text-align: center;
          }
        }

        p:hover {
          background-color: #ddd;
        }
      }

      .pay {
        margin-top: 10px;
        padding-left: 10px;
        margin-bottom: 15px;
        font-size: 18px;
      }

      .detail {
        background: #feedef;
        padding: 1px;
        margin: 12px auto 0;
        font-size: 10px;

        h5 {
          line-height: 1px;
        }

        .list {
          display: flex;
          justify-content: space-between;

          img {
            height: 80px;
            width: 80px;
            margin-right: 15px;
          }

          .desc {
            flex: 1;
            font-size: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .desctitle {
              font-size: 14px;
              color: #666;
              font-weight: 600;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .count {
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }

  .bg {
    height: 5px;
    background: #eee;
    margin-top: 10px;
  }

  .bg2 {
    height: 5px;
    background: #eee;
    margin-top: 50px;
  }
}
</style>